<template>
    <div id="myTask">
        
       
        <div id="word">
            <!--后退-->
            <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
            <div id="del" >
                <!--头部遮罩层-->
                <div class="nav"></div>
                <div class="nav1">
                    <div style="margin-top:-5rem;">
                                <img style="border-radius:50%;height:18rem;width:18rem;"src="../../../assets/test.jpg" alt="">
                    </div>
                </div>
                <div class="nav2"></div>
                <!--文本内容-->    
                <div class="userHeader">
                    <div class="userImg" >
                        <img style="" :src="userShopH.userModel.headPortrait" alt="">
                    </div>
                    <!--标题-->
                    <div class="title">
                        <div class="userShopTit">
                            <div style="display:flex;">
                                    <p style="font-size:0.8rem;" @click="alterTitle">{{userShopH.shopName}}</p> 
                                    <img style="height:0.8rem;width:0.8rem;margin-left:0.4rem;margin-top:0.15rem;" src="../../../assets/task/male.png" alt="">
                            </div>
                            <div>
                                    <rate :length="5"/>
                            </div>
                        </div>
                        <!--内容-->
                        <div class="userShopExp">
                            {{userShopH.shopExplain}}
                        </div>
                        <!--时间-->
                        <div class="serTime">
                            <p>承诺服务时间</p>
                            <p style="vertical-align: bottom;">
                            <span>{{serverGroup[0]}}-{{serverGroup[1]}} </span>
                            <span>{{userShopH.beginOpenTime}}-{{userShopH.endOpenTime}}</span></p>
                        </div>
                        <!--参数-->
                        <div class="parameter">
                            <p>评价数：<span>{{userShopH.evaluateSum}}</span></p>
                            <p>交易数：<span>{{userShopH.transactionSum}}</span></p>
                        </div>
                        <!--店铺状态开关-->
                        <p class="stuSwitch">
                            <el-switch
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                v-model="userShopH.status"
                                active-value="1"
                                inactive-value="0"
                                @change="switchChange(userShopH)">
                            </el-switch>
                        </p>
                    </div>
                </div>
            </div>

                <!--商铺列表-->
            <div class="shoplistS" v-infinite-scroll="loadMore"
                     infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0"
                     infinite-scroll-immediate-check="false">
                    <!--总的列表-->
                <div id="shop" v-for="(item,index) in shopAll">
                    <div class="shopTitle">
                        <img class="shopImg" src="../../../assets/task/shop.png" alt="">
                        <div class="shopName">
                            <div style="font-size:0.6rem;color:#8b8b8b;">
                                {{item.serverName}}
                                <div class="star">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                </div>
                            </div>
                            <p><img @click="delShopCard(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        </div>
                    </div>
                    <div class="shopCon">
                        <div class="particulars">
                                <p v-if="item.topExplainJson.input1==undefined">
                                    <img style="height:28vh;width:100%;" :src="item.topExplainJson.common1" alt="">
                                </p>
                                <p v-else-if="item.topExplainJson.common1==undefined">
                                    {{item.topExplainJson.input1}}
                                </p>
                        </div>
                        <div style="margin:auto;width:30%;">
                            <div class="upper">
                                    <p v-if="item.topExplainJson.input2==undefined">
                                        <img style="height:13vh;width:5.8rem;" :src="item.topExplainJson.common2" alt="">
                                    </p>
                                    <p v-else="item.topExplainJson.common2==undefined">
                                        {{item.topExplainJson.input2}}
                                    </p>
                            </div>
                            <div class="lower" style="">
                                    <p v-if="item.topExplainJson.input3==undefined">
                                        <img style="height:13vh;width:5.8rem;" :src="item.topExplainJson.common3" alt="">
                                    </p>
                                    <p v-else="item.topExplainJson.common3==undefined">
                                        {{item.topExplainJson.input3}}
                                    </p>
                            </div>
                        </div>
                    </div>
                    <div class="shopStu">
                        <el-switch
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                v-model="item.serverStatus"
                                active-value="1"
                                inactive-value="0"
                                @change="switchChangeServer(item)">
                        </el-switch>
                        <p><router-link :to="{path:'/editProduct/'+item.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                    </div>
                </div>
                <!--新增列表-->
                <div id="shop" v-for="(item,index) in shopAdd">
                    <div class="shopTitle">
                        <img class="shopImg" src="../../../assets/task/shop.png" alt="">
                        <div class="shopName">
                                <div style="font-size:0.6rem;color:#8b8b8b;">
                                    {{item.serverName}}
                                    <div class="star">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                        <img src="../../../assets/task/star.png" alt="">
                                    </div>
                                </div>
                                <p><img @click="delShopCard(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        </div>
                    </div>
                    <div class="shopCon">
                            <p class="particulars">
                            </p>
                        <div style="margin:auto;width:30%;">
                                <p class="upper">
                                </p>
                                <p class="lower">
                                </p>
                        </div>
                    </div>
                    <div class="shopStu">
                        <el-switch
                                v-model="value2"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                >
                        </el-switch>
                        <!--新增服务-->
                        <p><router-link :to="{path:'/addEditProduct/'+userShopH.id}" style="text-decoration:none;color:#fff;">详情</router-link></p>
                    </div>
                </div>

                <div v-show="moreLoading" style="text-align: center;line-height: 2rem">已经没有更多数据了</div>
            </div>

            <button id="addTo" @click="addTaskCard()">
                <img src="../../../assets/tabber/addImg.png" alt="">
            </button>
        </div>
        <!--编辑店铺标题-->
        <div id="titleWindow" v-show="titleWindow">
        </div>
        <div id="titleLayer" v-show="titleLayer">
            <span><img  @click="closeTitle" src="../../../assets/task/chanelB.png" alt=""></span>
            <p><img src="../../../assets/me/rubbish.png" alt=""></p>
            <p>服务标题</p>
            <p><input type="text" placeholder="请输入商铺标题" v-model="userShopH.shopName"></p>
            <p class="config" @click="configTit">确定</p>
        </div>
        <!--编辑店铺-->
        <div id="editShopWindow" v-show="editShopWindow">
        </div>
        <div id="editShopLayer" v-show="editShopLayer">
            <p class="numFirst">
                <span>店铺名称</span>
                <span><img  @click="closeShop" src="../../../assets/task/chanelB.png" alt=""></span>
            </p>
            <input type="text" v-model="userShopH.shopName">
            <p class="numFirst">
                <span>服务时间</span>
                <span>最多选择两天</span>
            </p>
            <p class="serverDay">
                <el-checkbox-group v-model="serverGroup">
                    <el-checkbox-button v-for="days in serverDay" :label="days" :key="days">{{days}}</el-checkbox-button>
                </el-checkbox-group>
            </p> 
            <section>
            </p>
            <p>
                <div class="timeSel">
                    <input v-model="userShopH.beginOpenTime" type="text" @click="openPickerHour" placeholder="请选择开始时间">
                    <input v-model="userShopH.endOpenTime" type="text" @click="openPickerHourLa" placeholder="请选择结束时间">
                </div>
                <mt-datetime-picker
                    v-model="userShopH.beginOpenTime"
                    type="time"
                    ref="Hour"
                    @confirm="handleConfirmHour">
                </mt-datetime-picker>
                <mt-datetime-picker
                    v-model="userShopH.endOpenTime"
                    type="time"
                    ref="HourLa"
                    @confirm="handleConfirmHourLa">
                </mt-datetime-picker>
            </section>
            <p class="numFirst">
                <span>服务范围</span>
            </p>
            <textarea name="" id="" cols="30" rows="10" v-model="userShopH.shopExplain"></textarea>
             <p class="submit" @click="shopInfo">确定</p>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
        forms: {
            shopId:undefined,
            pageSize: 10,
            pageNumber: 1,
        },
        form:{
            shopId:undefined,
            shopName:undefined,
        },
        shopAll:[],
        value2:true,
        pickerValue:'',
        isActive:'1',
        titleLayer:false,
        titleWindow:false,
        editShopLayer:false,
        editShopWindow:false,
        serverDay:[
            '周一','周二','周三','周四','周五','周六','周日'
        ],
        userShopH:{
            userModel:{
                headPortrait:undefined,
            },
        },//获取店铺信息
        shopAdd:[],//新建
        serverGroup:[],//服务日期
        beginTime:[],//服务开始时间
        endTime:[],//服务结束时间
        newTaskShop:{},
      moreLoading: false,
      loading: false
    }
  },
   watch:{
      serverGroup:function(){
          if(this.serverGroup.length>2){
              this.serverGroup.pop()
              alert("喵喵,最多选择两天噢")
          }
      }
  },
  created(){
    this.userShop();
  },
  methods:{
    //修改店铺标题
    alterTitle(){
        this.titleLayer=true;
        this.titleWindow=true;
        
    },
    configTit(){
        this.closeTitle();
        this.$api.updateTask(this.userShopH).then((res)=>{
            if(res.code == '000000'){

            }
        })
    },
    //修改店铺信息
    switchChange(val){
        this.$api.updateTask(val).then((res)=>{
            if(res.code == '000000'){

            }
        })   
    },
    //获取用户商铺信息+this.userShopH.id
    userShop(){
        this.$api.userShopInfo().then((res)=>{
            if(res.code!='000000'){
                console.log('1111111111')
                this.showShopEdit()
            }else{
                    this.userShopH=res.data;
                    console.log('this.userShopH')
                    console.log(this.userShopH)
                    this.userShopH.status=this.userShopH.status+''
                    this.forms.shopId = this.userShopH.id;
                    this.serverList()
            }
        })
    },
    //获取服务列表
    serverList(){
        this.$api.getServerById(this.forms).then((res)=>{
            if(res.code == '000000'){
                res.data.list.forEach((item)=>{
                    item.topExplainJson=JSON.parse(item.topExplainJson)
                    item.explainJson=JSON.parse(item.explainJson)
                    item.serverStatus=item.serverStatus+''
                    this.shopAll.push(item);
                })
               
            }
        })

    },
    loadMore(){
      this.forms.pageNumber++
      this.userShop()
    },
    //获取服务列表
    serverList(){
      this.loading = true
      this.$api.getServerById(this.forms).then((res)=>{
        if(res.code == '000000'){
          this.loading = false
          if (this.forms.pageNumber === res.data.totalPage){
            this.moreLoading = true
          }else {
            this.moreLoading = false
          }
          res.data.list.forEach((item)=>{
            item.topExplainJson=JSON.parse(item.topExplainJson)
            item.explainJson=JSON.parse(item.explainJson)
            item.serverStatus=item.serverStatus+''
            this.shopAll.push(item)
          })
          console.log(this.shopAll)
        }
      })
    },
    //修改其中一条服务的状态
    switchChangeServer(val){
        this.$api.alterShop(val).then((res)=>{
            if(res.code == '000000'){
            }
        })   
    },
    shopInfo(){
        this.userShopH.openDay1=this.serverGroup[0];
        this.userShopH.openDay2=this.serverGroup[1];
        //判断服务开始时间小于结束时间
        this.beginTime=this.userShopH.beginOpenTime.split(":");
        this.endTime=this.userShopH.endOpenTime.split(":");

        if(this.beginTime[0]>this.endTime[0]){
            this.$messagebox.alert("喵喵,开始时间必须小于结束时间噢")
        }else if(this.beginTime[0]==this.endTime[0]&&this.beginTime[1]>this.endTime[1]){
            this.$messagebox.alert("喵喵,开始时间必须小于结束时间噢")
        }else{
            this.closeShop()
        }

        //保存新建达人店铺信息
        this.newTaskShop.shopName=this.userShopH.shopName
        this.newTaskShop.beginOpenTime=this.userShopH.beginOpenTime
        this.newTaskShop.endOpenTime=this.userShopH.endOpenTime
        this.newTaskShop.shopExplain=this.userShopH.shopExplain
        this.newTaskShop.openDay1=this.userShopH.openDay1
        this.newTaskShop.openDay2=this.userShopH.openDay2

        this.$api.newTask(this.newTaskShop).then((res)=>{
            if(res.code == '000000'){

            }
        })
    },
    openPicker() {
        this.$refs.picker.open();
    },
    serverSel(index){
        this.isActive=index;
    },
    addTaskCard(){
       var obj={}
       obj.serverName=undefined;
       obj.topExplainJson={};
       this.shopAdd.push(obj)
    },
    showShopEdit(){
        this.editShopLayer=true;
        this.editShopWindow=true;
    },
    closeTitle(){
        this.titleLayer=false;
        this.titleWindow=false;
    },
    closeShop(){
        this.editShopLayer=false;
        this.editShopWindow=false;
    },
    delShopCard(index){
        this.shopAdd.splice(index,1)
    },
    handleConfirmHour(){

    },
    handleConfirmHourLa(){

    },
    openPickerHour(){
        this.$refs.Hour.open();
    },
    openPickerHourLa(){
        this.$refs.HourLa.open();
    },
  }
}
</script>
<style>
#myTask .Rate__star{
  color: #f4ec2a;
}
#myTask .Rate__star[data-v-59a74259] {
    padding: 0px;
}
#myTask .el-checkbox-button{
    border-radius:0.5rem;
    margin-left:0.5rem;
}
#myTask .el-checkbox-button__inner{
    height:2.2rem;
    width:3.5rem;
    padding-top:0.6rem;
    padding-left:1rem;
    color:#a7a7a7;
    font-size:0.8rem;
    border-radius:0.8rem;
    margin:0.3rem auto;
    background:#f8f8f8;
}
#myTask .el-checkbox-button.is-checked .el-checkbox-button__inner{
    background:#86c28f;
    color:#fff;
}
#myTask .shoplistS{
    margin-top:22vh;
    height:78vh;
    overflow:scroll;
}
#myTask #word{
    width:100%;
    position:absolute;
    z-index:4;
}
#myTask #word .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
    z-index:666;
}
#myTask #del{
    width:100%;
    height:20vh;
    position:absolute;
    top:0;
}
#myTask #del .nav{
    height:20vh;
    width:100%;
    background:#2f9a90;
    position:absolute;
    z-index:1;
    filter: blur(0.41500000000000004rem);
}

#myTask #del .nav1{
    height:20vh;
    width:100%;
    overflow:hidden;
    position:absolute;
    z-index:2;
    filter: blur(0.41500000000000004rem);
}
#myTask #del .nav2{
    border-bottom:1px solid #ffffff;
    height:20vh;
    width:100%;
    background:rgba(225,225,255,0.83);
    position:absolute;
    z-index:3;
}
#myTask #del .userHeader{
    position:absolute;
    z-index:4;
    display:flex;
    justify-content:space-between;
    width:100%;
    height:20vh;
    padding:5vw 5vw 3vw 10vw;
}
#myTask #del .userHeader .userImg{
    margin-top:1rem;
    text-align:center;
}
#myTask #del .userImg img{
    height:3.5rem;
    width:3.5rem;
    border-radius:50%;
    border:1px solid white;
}
#myTask #del .title{
    width:80%;
}
#myTask #del .title .userShopTit{
    width:100%;
    display:flex;
    justify-content:space-between;
}
#myTask #del .title .userShopExp{
    width:100%;
    height:6vh;
    margin:0.5rem 0px;
    font-size:0.7rem;
    color:#2da295;
}
#myTask #del .title .serTime{
    height:1.1rem;
    line-height:1.1rem;
    padding:0px 0.15rem;
    width:80%;
    background:#fbfbfb;
    display:flex;
    justify-content:space-between;
    font-size:0.5rem;
    color:#2da295;
}
#myTask #del .title .parameter{
    height:1.25rem;
    line-height:1.25rem;
    width:80%;
    font-size:0.6rem;
    color:#2da295;
    display:flex;
    justify-content:space-between;
}
#myTask #del .title .stuSwitch{
    position:absolute;
    right:3vw;
    top:15vh;
}
#myTask #shop{
    padding:1rem;
    border-radius:7px;
    background-size:100% 100%;
    background-image:url(../../../assets/task/zhaofuw.png);
}
#myTask #shop .shopTitle{
    display:flex;
    width:93%;
    margin:0.5rem auto;
    height:1.25rem;
}
#myTask #shop .shopImg{
    width:1.8rem;
    height:1.8rem;
    margin:auto 0.25rem;
}
#myTask #shop .shopName{
    width:100%;
    display:flex;
    justify-content:space-between;
}
#myTask #shop .shopName > p >img{
    height:1rem;
}
#myTask #shop .star>img{
    width:0.6rem;
    height:0.6rem;
}
#myTask #shop .shopCon{
    display:flex;
    width:93%;
    font-size:0.9rem;
    margin:1rem auto 0;
}
#myTask #shop .particulars{
    height:30vh;
    width:70%;
    border-radius:7px;
    border:7px solid #29a193;
}
#myTask #shop .upper{
    height:15vh;
    border-radius:7px;
    border:7px solid #c4e1c6;
}
#myTask #shop .upper > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#myTask #shop .lower{
    height:15vh;
    border-radius:7px;
    border:7px solid #69b373;
}
#myTask #shop .lower > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#myTask #shop .shopStu{
    display:flex;
    width:93%;
    margin:0.25rem auto;
    justify-content:space-between;
}
#myTask #shop .shopStu > p{
    height:1.5rem;
    width:3rem;
    text-align:center;
    line-height:1.5rem;
    border-radius:4px;
    font-size:0.8rem;
    color:#8c8d8a;
    background:#c4e1c6;
}
#myTask #addTo{
    position:fixed;
    bottom:10rem;
    left:80%;
    width:4rem;
    text-align:center;
    line-height:4rem;
    height:4rem;
    background:#29a193;
    border-radius:50%;
}
#myTask #addTo img{
    height:3rem;
    width:3rem;
}
#myTask #editShopWindow,#titleWindow{
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1111;  
    position: absolute; 
}

#myTask #editShopLayer{
    width: 80%;
    background:#ffffff;
    left: 10%;
    top: 10%;
    color:#000;
    z-index: 1112;
    padding:0 0.8rem 0.8rem 0.8rem;
    line-height:2.5rem;
    border-radius:0.8rem;
    position: absolute;
    font-size:1rem;
}
#myTask #editShopLayer .numFirst{
    display:flex;
    margin-top:0.5rem;
    justify-content:space-between;
}
#myTask #editShopLayer > input{
    height:2.5rem;
    width:80%;
    padding:0.5rem;
    border:0.1rem solid #86c28f;
    border-radius:0.5rem;
    margin-left:10%;
}
#myTask #editShopLayer .serverDay{
    display:flex;
    width:85%;
    margin-left:8%;
    flex-wrap:wrap;
}

#myTask #editShopLayer .timeSel{
    display:flex;
    margin-top:1rem;
    width:80%;
    margin-left:10%;
    justify-content:space-between;

}
#myTask #editShopLayer .timeSel > input {
    border:1px solid rgb(41, 161, 147);
    width:40%;
    height:2rem;
    text-align:center;
    border-radius:0.8rem;
    border:0.1rem solid #86c28f;
}
#myTask #editShopLayer > textarea{
    height:6rem;
    width:80%;
    padding:0.5rem;
    border:0.1rem solid #86c28f;
    border-radius:0.5rem;
    margin-left:10%;
}

#myTask #editShopLayer .submit{
    width:30%;
    height:2.5rem;
    line-height:2.5rem;
    color:#fff;
    border-radius:0.8rem;
    margin:auto;
    margin-top:-0.5rem;
    text-align:center;
    background:#29a193;
}
#myTask #titleLayer{
    width: 80%;
    background:#ffffff;  
    left: 10%;  
    top: 20%;
    color:#000;  
    z-index: 1112; 
    padding:0.8rem;
    line-height:2.5rem;
    border-radius:0.8rem; 
    position: absolute;
    font-size:1rem;    
}
#myTask #titleLayer span{
    position:absolute;
    right:5%;
}
#myTask #titleLayer p{
    text-align:center;
}
#myTask #titleLayer p:nth-child(2) > img{
    height:10vh;
}
#myTask #titleLayer input{
    background:#f8f8f8;
    height:2.5rem;
    line-height:2.5rem;
    padding:0.5rem;
}
#myTask #titleLayer .config{
    background:#29a193;
    height:2.5rem;
    line-height:2.5rem;
    width:40%;
    color:#fff;
    margin:1rem auto 0;
}
</style>
